<#assign pageName="公共模板实例-富文本编辑器">
<@override name="head-styles">
    <style>
        .layui-input-block{
            margin-left:0px;
        }
    </style>
</@override>
<@override name="page-content">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>${pageName}</legend>
    </fieldset>
    <h4 style="font-weight:bold; padding:10px;">1、功能演示</h4>
    <form class="layui-form padding-10" lay-filter="formTemplate">
        <div class="layui-form-item">
            <div class="layui-input-block">
                <textarea id="mytextarea" name="mytextarea"></textarea>
            </div>
        </div>
    </form>
    <h4 style="font-weight:bold; padding:10px;">2、实例代码</h4>
    <pre class="layui-code code-html" lay-encode=true>
        <!-- 为功能演示正常而引入注释！
        <form class="layui-form padding-10" lay-filter="formTemplate">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <textarea id="mytextarea" name="mytextarea"></textarea>
                </div>
            </div>
        </form> 
        -->
    </pre>
    <pre class="layui-code code-js" lay-encode=true>
        <!-- 为功能演示正常而引入注释！
        <script src="${contextPath}/assets/plugins/tinymce/tinymce.min.js"></script>
        <script src="${contextPath}/assets/plugins/tinymce/tinymce.config.js"></script>
        <script>
            $(function(){
                var tinyId = "mytextarea";
                layui.use(['form','layer', 'jquery'], function(){
                    var form = layui.form;
                    var layer=layui.layer;
                    $=layui.jquery;
                    initTiny(tinyId);
                    form.on('submit(submit)', function(data){
                        //获取编辑器内容
                        var cnt = tinyMCE.editors[tinyId].getContent();
                        //获取编辑器文本内容
                        var ctt = tinyMCE.editors[tinyId].getContent({ format: 'text' });
                        //将内容放入到提交数据中
                        data.field.context = cnt;
                        data.field.plain_txt = ctt;
                        //提交数据
                        //submitData(data.field, url, success_func);
                        //打印数据
                        console.log(data.field);
                    });
                })
            })
        </script>
        -->
    </pre>
    <h4 style="font-weight:bold; padding:10px;">3、功能说明</h4>
    <p>1、富文本编辑器采用TinyMCE，中文文档参考<a href="http://tinymce.ax-z.cn/" target="_blank">http://tinymce.ax-z.cn/</a></p>
    <p>2、编辑器中文件上传、图片上传后端使用Java-Aliyun-OSS处理，实际业务请根据需求调整修改！</p>
    <p>3、编辑器默认配置位于tinymce.config.js中，可根据需求修改！</p>
    <p>4、编辑器文件及图片上传后台由AliyunUploadController.java支持！</p>
</@override>
<@override name="page-scripts">
    <script src="${contextPath}/assets/plugins/tinymce/tinymce.min.js"></script>
    <script src="${contextPath}/assets/plugins/tinymce/tinymce.config.js"></script>
    <script>
        $(function(){
            var tinyId = "mytextarea";
            layui.use(['form','layer', 'jquery', 'code'], function(){
                var form = layui.form;
                var layer=layui.layer;
                $=layui.jquery;
                initTiny(tinyId);
                layui.code({elem:'.code-html',title:'html', skin:'notepad'});
                layui.code({elem:'.code-js',title:'javascript', skin:'notepad'});
                form.on('submit(submit)', function(data){
                    //获取编辑器内容
                    var cnt = tinyMCE.editors[tinyId].getContent();
                    //获取编辑器文本内容
                    var ctt = tinyMCE.editors[tinyId].getContent({ format: 'text' });
                    //将内容放入到提交数据中
                    data.field.context = cnt;
                    data.field.plain_txt = ctt;
                    //提交数据
                    //submitData(data.field, url, success_func);
                    //打印数据
                    console.log(data.field);
                });
            })
        })
    </script>
</@override>
<@extends name="/layout/basepage.html"/> 